<template>
		<div class="map-wrap">
			<div id="allmap"></div>
		</div>
</template>
<script type="text/ecmascript-6">
	import { lazyBmapLoader } from '@/assets/js/map'

	const prefixCls = 'v-map'
	export default {
		name: prefixCls,
		data() {
			return {
			}
		},

		created() {
			lazyBmapLoader()
		},
		mounted() {
			setTimeout(() => {
				this.baiduMap()
			}, 500)
		},
		methods: {
			loadJScript(baiduMapapi) {
				let script = document.createElement('script')
				script.type = 'text/javascript'
				script.src = 'https://api.map.baidu.com/api?v=2.0&ak=OjVfI3ARMRw9j9GyCk3UPMYHCg7NOHwM&callback=baiduMapapi'
				document.body.appendChild(script)
			},
			baiduMap() {
				let map = new window.BMap.Map('allmap', { enableMapClick: true })
				let point = new window.BMap.Point(114.055189, 22.705842)
				map.centerAndZoom(point, 18)
				map.addControl(new window.BMap.MapTypeControl())
				map.setCurrentCity('深圳')
				map.enableScrollWheelZoom(true)
				map.enableDoubleClickZoom(true)
				// let myIcon = new window.BMap.Icon('http://api.map.baidu.com/img/markers.png', new window.BMap.Size(23, 25), {
				// 	offset: new window.BMap.Size(10, 25),
				// 	imageOffset: new window.BMap.Size(0, -314)
				// })
				// let marker = new window.BMap.Marker(point, { icon: myIcon })
				// map.addOverlay(marker)
				let ctrlNav = new window.BMap.NavigationControl({
					anchor: window.BMAP_ANCHOR_TOP_LEFT,
					type: window.BMAP_NAVIGATION_CONTROL_LARGE
				})
				map.addControl(ctrlNav)
				let ctrlOve = new window.BMap.OverviewMapControl({
					anchor: window.BMAP_ANCHOR_BOTTOM_RIGHT,
					isOpen: 1
				})
				map.addControl(ctrlOve)
				let ctrlSca = new window.BMap.ScaleControl({
					anchor: window.BMAP_ANCHOR_BOTTOM_LEFT
				})
				// let marker = new window.BMap.Marker(point)  // 创建标注
				// map.addOverlay(marker)
				// let label = new window.BMap.Label('華潤大廈', { offset: new window.BMap.Size(20, -10) })
				// marker.setLabel(label)

				// map.addControl(ctrlSca)
				function ComplexCustomOverlay(point, text, mouseoverText) {
					this._point = point
					this._text = text
					this._overText = mouseoverText
				}
				ComplexCustomOverlay.prototype = new window.BMap.Overlay()
				ComplexCustomOverlay.prototype.initialize = function (map) {
					this._map = map
					let div = this._div = document.createElement('div')
					div.style.position = 'absolute'
					div.style.zIndex = window.BMap.Overlay.getZIndex(this._point.lat)
					div.style.backgroundColor = '#EE5D5B'
					div.style.border = '1px solid #BC3B3A'
					div.style.color = 'white'
					div.style.height = '18px'
					div.style.padding = '2px'
					div.style.lineHeight = '18px'
					div.style.whiteSpace = 'nowrap'
					div.style.MozUserSelect = 'none'
					div.style.fontSize = '12px'
					let span = this._span = document.createElement('span')
					div.appendChild(span)
					span.appendChild(document.createTextNode(this._text))
					let that = this

					let arrow = this._arrow = document.createElement('div')
					arrow.style.background = 'url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat'
					arrow.style.position = 'absolute'
					arrow.style.width = '11px'
					arrow.style.height = '10px'
					arrow.style.top = '22px'
					arrow.style.left = '10px'
					arrow.style.overflow = 'hidden'
					div.appendChild(arrow)

					div.onmouseover = function () {
						this.style.backgroundColor = '#6BADCA'
						this.style.borderColor = '#0000ff'
						this.getElementsByTagName('span')[0].innerHTML = that._overText
						arrow.style.backgroundPosition = '0px -20px'
					}

					div.onmouseout = function () {
						this.style.backgroundColor = '#EE5D5B'
						this.style.borderColor = '#BC3B3A'
						this.getElementsByTagName('span')[0].innerHTML = that._text
						arrow.style.backgroundPosition = '0px 0px'
					}
					map.getPanes().labelPane.appendChild(div)

					return div
				}
				ComplexCustomOverlay.prototype.draw = function () {
					let map = this._map
					let pixel = map.pointToOverlayPixel(this._point)
					this._div.style.left = `${pixel.x - parseInt(this._arrow.style.left)}px`
					this._div.style.top  = `${pixel.y - 30}px`
				}
				let txt = '方兴利投资',
					mouseoverTxt = txt

				let myCompOverlay = new ComplexCustomOverlay(new window.BMap.Point(114.055189, 22.705842), '方兴利投资', mouseoverTxt)

				map.addOverlay(myCompOverlay)
			}
		}
	}
</script>
<style lang="stylus" rel="stylesheet/stylus">
	.map-wrap
		width 100%
		height 100%
		#allmap
			width 100%
			height 100%
			overflow hidden
			margin 0
			.anchorBL
				display none
</style>
